<template>
  <div class="container">
    <div class="title">快速入门</div>
    <div id="chart" />
  </div>
</template>

<script>
import G6 from '@antv/g6';
import insertCss from 'insert-css';

insertCss(`
  .g6-component-tooltip {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0px 10px 24px 10px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
`);

const grid = new G6.Grid();
const minimap = new G6.Minimap();
const tooltip = new G6.Tooltip({
  offsetX:    10,
  offsetY:    10,
  fixToNode:  [1, 0],
  itemTypes:  ['node', 'edge'],
  trigger:    'click', // 触发时机
  getContent: (e) => {
    const outDiv = document.createElement('div'); // 自定义 tooltip 内容

    outDiv.style.width = 'fit-content';
    //outDiv.style.padding = '0px 0px 20px 0px';
    outDiv.innerHTML = `
      <h1>Custom Content</h1>
      <h2>Type: ${e.item.getType()}</h2>
      <h3>Label: ${e.item.getModel().label || e.item.getModel().id}</h3>
    `;
    return outDiv;
  },
  shouldBegin(event) {
    return event.item.getModel().id === '1';
  },
});

const data = {
  nodes: [
    {
      id:             '1',
      label:          'node 1',
      type:           'k-rect',
      comboId:        'combo',
      description:    'This is node-0.',
      subdescription: 'This is subdescription of node-0.',
    },
    {
      id:    '2',
      label: 'node 2',
      style: {
        width:  120,
        height: 60,
      },
      comboId:        'combo',
      description:    'This is node-1.',
      subdescription: 'This is subdescription of node-1.',
    },
    {
      id:    '3',
      label: 'node 3',
      size:  [120],
      style: {
        height: 60,
      },
    },
    {
      id:    '4',
      label: 'node 4',
      style: {
        background: {
          fill:      'pink',
          stroke:    'green',
          padding:   [3, 2, 3, 2],
          radius:    2,
          lineWidth: 3,
        },
      },
    },
  ],
  edges: [
    {
      source:      '1',
      target:      '2',
      description: 'This is edge from node 0 to node 1.',
    },
    {
      source:      '1',
      target:      '3',
      description: 'This is edge from node 0 to node 2.',
    },
    {
      source: '2',
      target: '4',
    },
    {
      source: '3',
      target: '4',
      style:  {
        background: {
          fill:    '#ffffff',
          stroke:  '#000000',
          padding: [2, 2, 2, 2],
          radius:  2,
        },
      },
    },
  ],
  combos: [{
    id:      'combo',
    label:   'Combo123',
    type:    'rect',
    padding: 10,
    size:    [300, 200],
    fixSize: [300, 200],
    style:   {
      stroke: '#1890ff',
      fill:   'orange',
    },
    labelCfg: {
      style: {
        fill:       'red',
        fontWeight: 'bold',
        fontSize:   15,
      },
    },
  }],
};

export default {
  name: 'QuickStart5',
  data() {
    return { graph: null };
  },
  mounted() {
    this.createGraph();
  },
  methods: {
    createGraph() {
      this.registerNode(); // 在实例话之前调用
      const graph = new G6.Graph({
        container:    'chart',
        width:        window.innerWidth,
        height:       500,
        enabledStack: true,
        plugins:      [tooltip, grid, minimap],
        defaultEdge:  {
          type:  'polyline',
          style: {
            stroke:   'orange', // 线的颜色
            endArrow: true,
            radius:   10, // 表示的是拐角的 圆角
          },
        },
        defaultNode: {
          type:  'rect',
          size:  [100],
          color: 'red', // 边框颜色
          style: {
            fill:      'pink', // 填充色
            lineWidth: 6, // 边框宽度
            stroke:    'blue',
          },
          labelCfg: {
            style: {
              fill:     'white',
              fontSize: 16,
            },
          },
        },
        modes: {
          default: ['drag-node', 'drag-edge', 'zoom-canvas', 'drag-combo', 'collapse-expand-combo'],
        },
        fitCenter:  true,
        linkCenter: true,
        layout:     {
          type: 'grid',
        },
        renderer: 'svg',
      });

      graph.data(data); // 加载数据
      graph.render(); // 渲染
    },
    registerNode() {
      G6.registerNode('k-rect', {
        draw(cfg, group) { // cfg表示节点的数据  group表示节点分组
          const shape = group.addShape('rect', {
            draggable: true,
            attrs:     {
              x:      0,
              y:      0,
              width:  125,
              height: 40,
              fill:   cfg.style.fill, //填充色
              stroke: '', //边框
              radius: 8,
            },
          });
          // //里面的那层

          group.addShape('rect', {
            draggable: true,
            attrs:     {
              x:      5,
              y:      0,
              width:  120,
              height: 40,
              fill:   '#fff', //填充色
              radius: 6,
            },
          });
          // //文字
          group.addShape('text', {
            attrs: {
              textBaseline: 'middle',
              textAlign:    'center',
              x:            60, // 调整文本的坐标位置  必须要是 宽和高的一般才能居中显示
              y:            20,
              text:         cfg.label,
              fill:         '#000',
            },
          });
          return shape;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .title {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: white;
    font-weight: bold;
  }
}
</style>
